<template>
  <div>
    <Table
      ref="tableRef"
      :url="URL_PAGEQUERYSTATIONCOMMENT"
      :columns="data.columns"
      :handles="data.handles"
      :query="data.query"
    ></Table>
    <DialogReply ref="dialogReplyRef" @get-data="getData"></DialogReply>
    <DialogExamine ref="dialogExamineRef" @get-data="getData"></DialogExamine>
  </div>
</template>

<script lang="ts" setup name="commentList">
import Table from '@/components/table/index.vue';
import DialogReply from './dialogReply.vue';
import DialogExamine from './dialogExamine.vue';
import { URL_PAGEQUERYSTATIONCOMMENT } from '@/service/apis/pile';
import { queryDicByParent } from '@/service/apis/api';

const router = useRouter();

const tableRef = ref();
const dialogReplyRef = ref();
const dialogExamineRef = ref();

const optionsS = reactive({
  spectacleStatus: [] as any,
});

queryDicByParent({
  listDtos: ['replyStatus', 'spectacleStatus'],
}).then((res: any) => {
  if (res) {
    data.query[3].props.options = [...res.replyStatus];
    data.query[5].props.options = [...res.spectacleStatus];
    optionsS.spectacleStatus = [...res.spectacleStatus];
  }
});

const data = reactive({
  columns: [
    {
      prop: 'stationName',
      label: '站点名称',
    },
    {
      prop: 'userName',
      label: '用户账号',
    },
    {
      prop: 'userMobile',
      label: '用户手机号',
    },
    {
      prop: 'content',
      label: '评论内容',
    },
    {
      prop: 'contentTime',
      label: '评论时间',
    },
    {
      prop: 'replyStatusName',
      label: '回复状态',
    },
    {
      prop: 'spectacleStatusName',
      label: '公开展示状态',
    },
  ],
  handles: [
    {
      label: '审核评论 ',
      permission: 'commentList.examine',
      disabledFun: (row: any) => {
        return row.spectacleStatus !== 1;
      },
      handle: (row: any) => {
        dialogExamineRef.value.show(row, optionsS.spectacleStatus);
      },
    },
    {
      label: '回复',
      permission: 'commentList.reply',
      handle: (row: any) => {
        dialogReplyRef.value.show(row);
      },
    },
  ],
  query: [
    {
      label: '站点名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入站点名称',
      },
    },
    {
      label: '用户手机号',
      prop: 'userMobile',
      comName: 'input',
      props: {
        placeholder: '请输入用户手机号',
      },
    },
    {
      label: '评论内容',
      prop: 'content',
      comName: 'input',
      props: {
        placeholder: '请输入评论内容',
      },
    },
    {
      label: '回复状态',
      prop: 'replyStatus',
      comName: 'select',
      props: {
        placeholder: '请选择回复状态',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
    {
      label: '评论时间',
      prop: 'time',
      comName: 'date',
      keys: ['startContentTime', 'endContentTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '公开展示状态',
      prop: 'spectacleStatus',
      comName: 'select',
      props: {
        placeholder: '请选择公开展示状态',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
  ],
});

const getData = () => {
  tableRef.value.getData();
};
</script>